<template>
	<view class="main" @click="openUrl()">
		<view style="display: flex;flex-direction: column;">
			<text class="title">{{showItem[0]}}</text>
			<text class="info">{{showItem[1].includes('#')?showItem[1].slice(0,showItem[1].indexOf('#')):showItem[1]}}
			<text v-if="showItem[1].includes('#')" style="color: #D6110F;">{{showItem[1].slice(showItem[1].indexOf('#')+1,showItem[1].lastIndexOf('#'))}}</text>
			</text>
			
		</view>
		<image class="image" :src="`../../static/alertBanner/${showItem[2]}.png`" mode="aspectFill"></image>
	</view>
</template>

<script>
	export default {
		name: "warningPromptBanner",
		props: {
			listId: {
				type: Number,
				default: 0
			},
		},
		data() {
			return {
				list: [
					[
						['绕过平台 私下交易', '发现此类情况，永久性封号，且私下交易出现任何纠纷与平台无关', 'y'],
						['私下带人接单', '通过平台任务信息，私下带人接单。第一次限制接单7天，第二次限制接单30天', 'y'],
					],
					[
						['拨打电话', '请拨打电话确认具体任务内容，以免造成与实际信息不符,#为保障用户隐私，通话号码为虚拟号，请谨记不要通话记录内回拨#', 'g'],
						['直接接单', '请确认对任务信息足够了解，该任务不支持电话沟通，如有疑问，可与客服联系。', 'g'],
						['确认接单','注意：切记拨打电话后，返回接单页面进行操作，否则15分钟时效后，您将自动丧失接取本任务的资格。','y'],
						['取消报名','取消报名后将无法重复报名同一个任务,当日取消3次将限制当日接单，连续取消5次将限制接单3天','r']
					]
				],
				showItem:0,
			}
		},
		methods:{
			initPage(){
				let lt = this.list[this.listId]
				this.showItem = lt[Math.round(Math.random()*(lt.length-1))]
			},
			openUrl(){
				uni.navigateTo({
					url:'/pages/warningPrompt/warningPrompt'
				})
			},
		},
		beforeMount() {
			this.initPage()
		},
	}
</script>

<style lang="less" scoped>
	.main {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin: 0 auto;
		background-color: #fff4d6;
		width: 690rpx;
		height: auto;
		border-radius: 16rpx;
	}

	.title {
		margin: 30rpx 0 0 30rpx;
		display: block;
		font-size: 32rpx;
		font-weight: bold;
		color: #3E220A;
	}

	.info {
		margin: 0rpx 0 30rpx 30rpx;
		width: 430rpx;
		font-size: 26rpx;
		font-weight: 500;
		color: #3E220A;
	}
	.image {
		width: 148rpx;
		height: 148rpx;
		float: right;
		margin: auto 30rpx auto 0;
	}
</style>
